<template>
  <div class="lock" ref="lockRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title" :showAdd="false" :titleSlide="titleSlide"></header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <!-- 删除单张卡片时二次确认 -->
      <tagList class="tag-list" :titleBottom="'14px'" :showRightSlot="true" :showRightArrow="false" :content="data.deleteSecondaryConfirmation">
        <template #rightSlot>
          <van-switch v-model="checked" />
        </template>
      </tagList>
    </section>
  </div>
</template>

<script setup name="personalityPreference">
import headerComponent from "@/components/header/index.vue";
import tagList from '@/components/list/tagList.vue';
import { ref, watch, reactive } from "vue";
import useScroll from "@/hooks/useScroll";
import {Dialog} from "vant"
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
// data
const data = new reactive({
  // title
  title: '手势密码',
  isShowDialog: true,
  // contentList
  deleteSecondaryConfirmation: [{url: '', icon: 'fa-solid fa-lock', iconColor: '#f64f59', name: '用手势锁定YBox', type: '', typeName: '', value: '', label: '', info: ''}],
})
// 菜单
// 是否显示
const isShowOverlay = ref(false);
// 关闭弹窗
const handleClose = (value) => {
  console.log(value)
  isShowOverlay.value = false
}

const checked = ref(false);
// 标题动画相关的操作

const lockRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(lockRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>
.lock {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;
  section{
    padding: 0 12px;
  }
}
.lock::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
.tag-list{
  position: relative;
  top: 40px;
}
</style>

